<template>
    <div class="article" >
        <div v-html="resTag" ></div>
        <ul class="reply_list">
            <li
                class="reply_item"
                v-for="(item, index) in reply"
                v-bind:key="index"
            >
                <div class="autor_msg">
                    <span class="au_name_pic">
                        <img
                            v-bind:src="item.author.avatar_url"
                            class="anthor_pic"
                        >
                        <span class="name">{{item.author.loginname}}</span>
                    </span>
                    <span class="create_time">{{ $utils.formatTime(item.create_at) }}</span>
                </div>
                <div v-html="item.content"></div>
            </li>
        </ul>
    </div>
</template>



<style lang="scss">
    .article {
        padding: 5px 10px;
        .markdown-text{
            img{
                display: block;
                margin: 10px auto;
                max-width: 100%;
                vertical-align: top;
            }
        }
        .reply_list {
            .reply_item {
                margin-top: 15px;
                .autor_msg {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    .au_name_pic {
                        display: flex;
                        align-items: center;
                        .anthor_pic {
                            width: 30px;
                            height: 30px;
                            margin-right: 10px;
                            border-radius: 50%;
                        }
                    }
                }
            }
            background: url('../../static/image/timg.jpeg') center center no-repeat;
        }

    }
</style>

<script>
    export default {
        name: 'contentTemplate',
        data() {
            return {
                resTag: '',
                reply: []
            };
        },

        created() {
            let id = this.$route.params.id;
            this.getListDetail(id);
        },
        methods: {
            getListDetail (id) {
                this.$api.get(`/topic/${id}`, null, (res) => {
                    console.log(res);
                    if (res.success === true) {
                        this.resTag = res.data.content;
                        this.reply  = res.data.replies;
                    }
                })
            }
        }

    }
</script>